import {Component, ElementRef, OnInit, AfterViewInit, Input, forwardRef, Renderer2} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import * as wangEditor from 'wangeditor';

export const WANG_EDITOR_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => WangEditorComponent),
    multi: true
};

@Component({
    selector: 'kylin-wang-editor',
    templateUrl: './wang-editor.component.html',
    styleUrls: ['./wang-editor.component.css'],
    providers: [WANG_EDITOR_VALUE_ACCESSOR]
})
export class WangEditorComponent implements OnInit, AfterViewInit, ControlValueAccessor {

    @Input() _editorData: string;
    private editor: any;

    get editorData(): string {
        return this._editorData;
    }

    set editorData(value: string) {
        if (value) {
            this._editorData = value;
            this.propagateChange(this._editorData);
            this.editor.txt.html(this._editorData);
        }
    }

    propagateChange = (_: any) => {
    }

    constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    }

    writeValue(value: any) { // 该方法用于将模型中的新值写入视图或 DOM 属性中
        if (value) {
            this.editorData = value;
        }
    }

    registerOnChange(fn: any) {
        this.propagateChange = fn;
    }

    registerOnTouched(fn: any) {
    }


    ngAfterViewInit() {
        const editorDom = this.elementRef.nativeElement.querySelector('#editorElem');
        this.editor = new wangEditor(editorDom);
        this.editor.customConfig.menus = [
            // 'head',  // 标题
            'bold',  // 粗体
            // 'fontSize',  // 字号
            // 'fontName',  // 字体
            'italic',  // 斜体
            // 'underline',  // 下划线
            // 'strikeThrough',  // 删除线
            // 'foreColor',  // 文字颜色
            // 'backColor',  // 背景颜色
            // 'link',  // 插入链接
            // 'list',  // 列表
            // 'justify',  // 对齐方式
            // 'quote',  // 引用
            // 'emoticon',  // 表情
            // 'image',  // 插入图片
            // 'table',  // 表格
            // 'video',  // 插入视频
            // 'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ];
        this.editor.customConfig.uploadImgShowBase64 = true;
        this.editor.customConfig.onchangeTimeout = 500; // 单位 ms
        this.editor.customConfig.onchange = () => {
            this._editorData = this.editor.txt.html();
            this.propagateChange(this.editorData); // 双向绑定
        };
        this.editor.create();
        const toolbar = this.elementRef.nativeElement.querySelector('.w-e-toolbar');
        const container = this.elementRef.nativeElement.querySelector('.w-e-text-container');
        const editorElem = this.elementRef.nativeElement.querySelector('.editorElem');
        console.log(toolbar);
        console.log(container);
        console.log(editorElem);
        this.renderer.setAttribute(editorElem, 'backgroundColor', 'red');
    }

    ngOnInit() {

    }

}
